<template>
  <div>
    <div class="package-info-box" v-if="contractForm.state === 4">
      <div class="package-info">
        <div class="package-info-label">发包人</div>
        <div class="package-info-value" v-if="contractForm.jobUserName">
          {{ contractForm.jobUserName }}丨{{ contractForm.roleName }}
        </div>
        <div class="package-info-label">发包方式</div>
        <div class="package-info-value" v-if="contractForm.contracteesType">
          {{ contractForm.contracteesType === 1 ? "按照清单发包" : "按照面积发包" }}
        </div>
        <div class="package-info-label">发包金额</div>
        <div class="package-info-value" v-if="contractForm.factMoney">¥{{ contractForm.factMoney }}</div>
        <div class="package-info-label" v-if="contractForm.remark">发包说明</div>
        <div class="package-info-value" v-if="contractForm.remark">{{ contractForm.remark }}</div>
        <div class="package-info-label" v-if="contractForm.fileList?.length > 0">附件资料</div>
        <div class="package-info-file">
          <div class="file-list" v-for="item in contractForm.fileList" :key="item">
            <el-image :src="item.fileUrl" :preview-src-list="[item.fileUrl]">
              <template #error>
                <img style="width: 32px; height: 32px" src="@/assets/images/image/flie.png" alt="" />
              </template>
            </el-image>
            <el-tooltip :content="item.fileName">
              <div class="file-list-name">{{ item.fileName }}</div>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="package-list" ref="rectification">
        <div class="package-list-container">
          <div style="display: flex">
            <div
              v-for="(item, i) in list"
              :key="item"
              @click="handleActive(i)"
              :class="activeIndex === i ? 'active button' : 'button'"
            >
              {{ item.name }}
            </div>
          </div>
          <el-select
            v-model="type"
            placeholder="请选择"
            style="width: 200px"
            v-if="activeIndex === 0"
            @change="handleChange"
            clearable
            @clear="handleChange"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div v-if="activeIndex === 0">
          <el-table
            ref="myTable"
            class="custom-table"
            :data="tableData"
            row-key="spaceIdTree"
            :tree-props="treeProps"
            :height="tableHeight"
            :expand-row-keys="expandRowKeys"
            :row-class-name="tableRowClassName"
            @expand-change="handleExpandChange"
            style="width: 100%; margin-top: 20px"
            :header-cell-style="{ background: '#F2F6FC', color: '#4E5969', 'font-weight': 400, 'font-size': '14px' }"
          >
            <el-table-column prop="date" label="名称" width="150" show-overflow-tooltip>
              <template #header>
                <div style="display: flex; align-items: center">
                  <div>名称</div>
                  <div style="margin-top: 8px; margin-left: 6px">
                    <img
                      v-if="isExpansion"
                      @click="toggleExpandAll"
                      style="width: 20px; cursor: pointer"
                      src="@/assets/images/image/sq.png"
                      alt=""
                    />
                    <img
                      v-else
                      @click="toggleExpandAll"
                      style="width: 20px; cursor: pointer"
                      src="@/assets/images/image/zk.png"
                      alt=""
                    />
                  </div>
                </div>
              </template>
              <template #default="{ row }">
                {{ row.quotaInfoVOList ? row.spaceName : row.quotaName }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="明细" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="row.mainSubcontractMoney">主材：￥{{ row.mainSubcontractMoney }}/</span>
                <span v-if="row.auxiliarySubcontractMoney">辅材：¥{{ row.auxiliarySubcontractMoney }}/</span>
                <span v-if="row.workerSubcontractMoney">人工：¥{{ row.workerSubcontractMoney }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="单位" show-overflow-tooltip width="60">
              <template #default="{ row }">
                {{ unitData.find(item => item.dictValue == row.unit)?.dictLabel }}
              </template>
            </el-table-column>
            <el-table-column prop="actualProjectVal" label="实际施工量" show-overflow-tooltip />
            <el-table-column prop="contracteesNum" label="发包量" width="100">
              <template #default="{ row }">
                <el-input-number
                  v-if="!row.quotaInfoVOList"
                  style="width: 100%"
                  v-model="row.contracteesNum"
                  :controls="false"
                  disabled
                />
              </template>
            </el-table-column>
            <el-table-column prop="subcontractTotalMoney" label="发包单价" width="100" />
            <el-table-column prop="subcontractTotalMoneyCnt" label="发包价(发包量*单价)" show-overflow-tooltip width="160" />
            <el-table-column prop="bindNames" label="品牌" show-overflow-tooltip />
            <el-table-column prop="modelNames" label="型号" show-overflow-tooltip />
          </el-table>
          <div style="margin-top: 20px">
            <span>共{{ listNum }}项，总计发包金额：</span>
            <span style="color: #ea0000"> ¥{{ listMoneyTotal || 0 }}</span>
            <span v-if="contractForm?.contracteesType === 2" style="color: #ea0000"
              >（ 该项目为面积发包模式实际发包金额{{ contractForm?.factMoney || 0 }}元 ）</span
            >
          </div>
        </div>
        <div v-else>
          <el-table
            stripe
            :data="tableDataTwo"
            :height="tableHeight"
            style="width: 100%; margin-top: 20px"
            :header-cell-style="{ background: '#F2F6FC', color: '#4E5969', 'font-weight': 400, 'font-size': '14px' }"
          >
            <el-table-column prop="nodeName" label="付款节点" show-overflow-tooltip />
            <el-table-column prop="constructionNodeName" label="施工节点" show-overflow-tooltip />
            <el-table-column prop="acceptanceItem" label="验收项" show-overflow-tooltip />
            <el-table-column prop="originalPlainStartDate" label="预计开工时间" show-overflow-tooltip />
            <el-table-column prop="address" label="计算规则" show-overflow-tooltip>
              <template #default="{ row }">
                {{ row.computeRule === 1 ? "发包总金额*付款比例" : "工种发包总价*付款比例" }}
              </template>
            </el-table-column>
            <el-table-column prop="payRate" label="计划付款比例" show-overflow-tooltip>
              <template #default="{ row }"> {{ row.payRate }}%</template>
            </el-table-column>
            <el-table-column prop="paymentAmount" label="计划付款金额" show-overflow-tooltip />
          </el-table>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无数据" />
  </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import { contractees, queryInfoList } from "@/apis/rectification";
import { useRoute } from "vue-router";
import { selectDictDataByType } from "@/apis/dict/dict";

const route = useRoute();
const list = ref([
  {
    name: "发包清单"
  },
  {
    name: "付款计划"
  }
]);
const options = ref([
  {
    value: 1,
    label: "主材"
  },
  {
    value: 2,
    label: "辅材"
  },
  {
    value: 3,
    label: "人工"
  }
]);
const treeProps = ref({
  checkStrictly: false,
  children: "quotaInfoVOList"
});
const tableHeight = ref(0);
const listNum = ref(0);
const listMoneyTotal = ref(0);
const contracteesId = ref("");
const rectification = ref();
const activeIndex = ref(0);
const type = ref();
const unitData = ref([]);
const contractForm = ref({});
// 切换 tabs
const handleActive = i => {
  activeIndex.value = i;
};
const tableData = ref([]);
const tableDataTwo = ref([]);
const expandRowKeys = ref([]);
const myTable = ref();
const isExpansion = ref(true);
const toggleExpandAll = () => {
  isExpansion.value = !isExpansion.value;
  if (isExpansion.value) {
    toggleRowExpansionAll(tableData.value, isExpansion);
  } else {
    expandRowKeys.value = [];
  }
};
const toggleRowExpansionAll = (data, isExpansion) => {
  data.forEach(item => {
    myTable.value.toggleRowExpansion(item, isExpansion);
    if (item.quotaInfoVOList !== undefined && item.quotaInfoVOList !== null) {
      toggleRowExpansionAll(item.quotaInfoVOList, isExpansion);
    }
  });
};
const tableRowClassName = ({ row }) => {
  if (expandRowKeys.value.includes(row.spaceIdTree)) {
    return "active-row";
  }
  return "init-row";
};
const handleExpandChange = (row, expanded) => {
  if (expanded) {
    expandRowKeys.value.push(row.spaceIdTree);
  } else {
    const index = expandRowKeys.value.indexOf(row.spaceIdTree);
    if (index !== -1) {
      expandRowKeys.value.splice(index, 1);
    }
  }
  isExpansion.value = expandRowKeys.value.length > 0;
};
const getUnit = async () => {
  const { data } = await selectDictDataByType("shop_unit");
  unitData.value = data || [];
};
getUnit();
const getContract = async () => {
  const { data } = await contractees(route.query.customerId);
  contractForm.value = data || {};
  tableDataTwo.value = data.planList;
  contracteesId.value = data.contracteesId;
  getQueryInfoList();
};
const getQueryInfoList = async () => {
  const { data } = await queryInfoList({
    contracteesId: contracteesId.value,
    type: type.value
  });
  let ids = [];
  let num = 0;
  let money = 0;
  data.map(item => {
    ids.push(item.spaceId);
    item.quotaInfoVOList.map(items => {
      num += 1;
      money += Number(items.subcontractTotalMoneyCnt);
    });
  });
  listNum.value = num;
  listMoneyTotal.value = money;
  expandRowKeys.value = ids;
  tableData.value = data;
};
getContract();
const handleChange = () => {
  if (!contracteesId.value) return;
  getQueryInfoList();
};
const setHeight = () => {
  nextTick(() => {
    tableHeight.value = document.documentElement.clientHeight - 320;
    console.log(tableHeight.value);
  });
};
setHeight();
</script>

<style scoped lang="scss">
@import "index";
</style>
